<template>
  <div>
    <img :src="imgs[index]" style="width: 700px;height: 450px">
    <br>
    <button type="button" @click="toLeft()">👈</button>
    <button type="button" @click="toRight()">👉</button>
  </div>
</template>

<script>
import img1 from '../assets/1.jpg';
import img2 from '../assets/2.jpg';
import img3 from '../assets/3.jpg';
import img4 from '../assets/4.jpg';
import img5 from '../assets/5.jpg';
import img6 from '../assets/6.jpg';
import img7 from '../assets/7.jpg';

export default {
  name: "First",
  data() {
    return {
      imgs: [img1, img2, img3, img4, img5, img6, img7],
      index: 0
    }
  },
  methods: {
    "toLeft": function () {
      this.index--;
      if (this.index < 0) {
        this.index = this.imgs.length - 1;
      }
    },
    "toRight": function () {
      this.index++;
      if (this.index > this.imgs.length-1) {
        this.index = 0;
      }
    }
  }
}
</script>

<style>

</style>
